<template>
  <div>
    <!--导航栏-->
    <van-nav-bar
        title="首页"
        left-text="返回"
        right-text="按钮"
        left-arrow
        @click-left="onClickLeft"
        @click-right="onClickRight"
    />
    <!--轮播图-->
    <van-row>
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>1</van-swipe-item>
        <van-swipe-item>2</van-swipe-item>
        <van-swipe-item>3</van-swipe-item>
        <van-swipe-item>4</van-swipe-item>
      </van-swipe>
    </van-row>
    <!--正方形格子分類-->
    <van-row>
      <van-grid square>
        <van-grid-item v-for="value in 8" icon="https://img01.yzcdn.cn/vant/cat.jpeg"  :key="value" text="文字" />
      </van-grid>
    </van-row>
    <!--列表-->
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
    <van-card
        num="2"
        price="2.00"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    >
      <template #title>
        <h2>呃呃呃呃</h2>
      </template>


      <template #desc>
        <h1>哈哈哈哈</h1>
      </template>

    </van-card>
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
    <van-card
        num="2"
        price="2.00"
        desc="描述信息"
        title="商品标题"
        thumb="https://img01.yzcdn.cn/vant/ipad.jpeg"
    />
  </div>
</template>

<script>
import { Toast } from 'vant';
export default {
  name: "start-index",
  methods: {
    onClickLeft() {
      Toast('返回');
    },
    onClickRight() {
      Toast('按钮');
    },
  }
}
</script>

<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}
</style>
